import React,{useState} from "react";
interface Props{
    initialUserName:string,
    onNameUpdated:(newName:string)=>void;
}
export const NameEditComponent:React.FC<Props>=({initialUserName,onNameUpdated})=>{
    const [editingName,seteditingName]=useState(initialUserName); // data 组件的自有数据
    const onChange=(event:any)=>{
        seteditingName(event.target.value);
    }
    const onNameSubmit=()=>{
        onNameUpdated(editingName);
    }
    return (
        <>
            <label>update name</label>
            <input type="text" value={editingName} onChange={onChange} />
            <button onClick={onNameSubmit}>change</button>
        </>
    )
}